<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./style.css">
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>

    <!--<script src="./jQuery.js"></script>-->
    <script src="./js.js"></script>
    <title>轮播图</title>
    <style type="text/css">
        *{
            padding:0px;
            margin:0px;
            border:0px;
        }
        li{
            list-style-type:none;
        }
        a{
            text-decoration:none;
        }
        #wrapper{
            margin:0px auto;
            border:0px;
            padding:0px;
        }
        #show-area{
            width:970px;
            height:290px;
            position:relative;
            margin:0px auto;
            overflow:hidden;

        }
        #show-area ul{
            position:relative;
            width: 1940px;
            height:220px;
            transition: all ease 0.5s;

            /*transform: translate3d(-970px, 0px, 0px);*/
        }

        #show-area ul li{
            border: none;
            width:965px;
            height:280px;
            position: absolute;
            clear: both;
            float: left;

        }

        #show-area ul .sol_li_1 {
            left: 0
        }

        #show-area ul .sol_li_2 {
            left: 970px;
        }

        #show-area ul .sol_div{
            float:left;
            width: 455px;
            height: 220px;
            overflow: hidden;
            font-size: 14px;
            float: left;
            border: 1px solid #d2d2d2;
            margin: 2px 7px;
            padding: 20px 5px;
        }



</style>
</head>
<body>
<div id="wrapper">
    <!--<div id="arrLeft" title="下一张"></div>-->
    <!--<div id="arrRight" title="上一张"></div>-->
    <div id="show-area">
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
            <div class="sol_ul carousel-inner" role="listbox">

                <div class="sol_li sol_li_1 item active" >
                    <div class="sol_div sol_1">
                        <div class="sol_left">
                            <img src="./yaoshi_1.png">
                        </div>
                        <div class="sol_right">
                            <p>
                                <img src="./yaoshi_1a.png">
                            </p>
                            <br>
                            <h2>全国执业药师资格考试用书</h2>
                            <dd>
                                <a>注册试听免费课程</a>
                            </dd>
                            <dt>
                                <a class="dt_a1">电子教案下载</a>
                                <a class="dt_a2">在线购买</a>
                                <a class="dt_a3">讲义下载</a>
                            </dt>
                        </div>
                    </div>
                    <div class="sol_div sol_2 ">
                        <div class="sol_left">
                            <img src="./yaoshi_2.png">
                        </div>
                        <div class="sol_right">
                            <p>
                                <img src="./yaoshi_2a.png">
                            </p>
                            <br>
                            <h2>全国执业药师资格考试用书</h2>
                            <dd>
                                <a>注册试听免费课程</a>
                            </dd>
                            <dt>
                                <a class="dt_a1">电子教案下载</a>
                                <a class="dt_a2">在线购买</a>
                                <a class="dt_a3">讲义下载</a>
                            </dt>
                        </div>
                    </div>
                    <div class="carousel-caption">

                    </div>
                </div>

                <div class="sol_li sol_li_2 item">
                    <div class="sol_div sol_3">
                        <div class="sol_left">
                            <img src="./yaoshi_3.png">
                        </div>
                        <div class="sol_right">
                            <p>
                                <img src="./yaoshi_3a.png">
                            </p>
                            <br>
                            <h2>全国执业药师资格考试用书</h2>
                            <dd>
                                <a>注册试听免费课程</a>
                            </dd>
                            <dt>
                                <a class="dt_a1">电子教案下载</a>
                                <a class="dt_a2">在线购买</a>
                                <a class="dt_a3">讲义下载</a>
                            </dt>
                        </div>
                    </div>
                    <div class="sol_div sol_4">
                        <div class="sol_left">
                            <img src="./yaoshi_4.png">
                        </div>
                        <div class="sol_right">
                            <p>
                                <img src="./yaoshi_4a.png">
                            </p>
                            <br>
                            <h2>全国执业药师资格考试用书</h2>
                            <dd>
                                <a>注册试听免费课程</a>
                            </dd>
                            <dt>
                                <a class="dt_a1">电子教案下载</a>
                                <a class="dt_a2">在线购买</a>
                                <a class="dt_a3">讲义下载</a>
                            </dt>
                        </div>
                    </div>
                    <div class="carousel-caption">

                    </div>
                </div>


            </div>

            <a id="arrLeft" class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                <span class="glyphicon " aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a id="arrRight" class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                <span class="glyphicon " aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>



    </div>
</div>

<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>






</body>
</html>